<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="姓名（模糊查询）"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select
          v-model="queryParams.sex"
          placeholder="请选择性别"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in sexOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入手机号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="服务日期" prop="serviceWeek">
        <el-select
          v-model="queryParams.serviceWeek"
          placeholder="请选择服务日期"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in serviceWeekOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="服务时间" prop="serviceTime">
        <el-select
          v-model="queryParams.serviceTime"
          placeholder="请选择服务时间"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in serviceTimeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否黑名单" prop="isBlack" label-width="130">
        <el-select
          v-model="queryParams.isBlack"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in blackList"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索
        </el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
        >重置
        </el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['person:person:add']"
        >义工报名
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['person:person:edit']"
        >修改
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['person:person:remove']"
        >删除
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['person:person:export']"
        >导出
        </el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-upload"
          size="mini"
          :loading="exportLoading"
          @click="handleImport()"

        >导入
        </el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="personList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"/>
      <!-- <el-table-column label="用户ID" align="center" prop="id" /> -->
      <el-table-column label="姓名" align="center" prop="name"/>

      <el-table-column
        label="性别"
        align="center"
        prop="sex"
        :formatter="sexFormat"
      />
      <el-table-column label="手机号" align="center" prop="phone"/>
      <el-table-column label="年龄" align="center" prop="age"/>
      <el-table-column
        label="报名日期"
        align="center"
        prop="birthday"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="健康状况" align="center" prop="healthCondition" :formatter="healthConditionFormat" /> -->
      <!-- <el-table-column label="职业" align="center" prop="occupation" /> -->
      <!-- <el-table-column label="其他" align="center" prop="otherNumber" /> -->
      <!-- <el-table-column label="省" align="center" prop="provinceId" />
      <el-table-column label="市区" align="center" prop="cityId" />
      <el-table-column label="区" align="center" prop="areaId" />
      <el-table-column label="街道" align="center" prop="streetId" /> -->
      <!-- <el-table-column label="详细地址" align="center" prop="address" /> -->
      <!-- <el-table-column label="身份证" align="center" prop="idCard" /> -->
      <!-- <el-table-column label="学历" align="center" prop="education" :formatter="educationFormat" /> -->
      <!-- <el-table-column label="专业证书" align="center" prop="professionalCertificate" /> -->
      <!-- <el-table-column label="特长" align="center" prop="specialty" /> -->
      <!-- <el-table-column label="紧急联系人" align="center" prop="emergencyPerson" />
      <el-table-column label="紧急联系人电话" align="center" prop="emergencyPhone" /> -->

      <el-table-column
        label="服务时间"
        align="center"
        prop="serviceWeek"
        :formatter="serviceWeekFormat"
      >
        <template slot-scope="scope">
          <span>{{ serviceWeekFormat(scope.row) }}</span>
          <span>{{ serviceTimeFormat(scope.row) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="为什么加入" align="center" prop="whyJoin" />
      <el-table-column label="期许得到什么" align="center" prop="expectNote" />
      <el-table-column label="接待人1" align="center" prop="receiverO" />
      <el-table-column label="接待人2" align="center" prop="receiverT" /> -->
      <el-table-column label="状态" align="center" prop="status"/>

      <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-connection"
            @click="handleExtend(scope.row)"
          >资料补充
          </el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['person:person:edit']"
          >修改
          </el-button
          >
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['person:person:remove']"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="资料补充" :visible.sync="openExpend">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="expandForm" size="medium" label-width="100px">
          <el-col :span="12">
            <el-form-item label="报名时间" prop="field103">
              <el-date-picker v-model="expandForm.enrollDate" readonly format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请选择报名时间" clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="见习开始" prop="field104">
              <el-date-picker v-model="expandForm.probationStartDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请选择见习开始" clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="见习结束" prop="field105">
              <el-date-picker v-model="expandForm.probationEndDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请选择见习结束" clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="意向组" prop="field106">
              <el-select v-model="expandForm.wantGo" placeholder="请选择意向组">
                <el-option
                  v-for="dict in groupIdOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="意向组接收人" prop="field106">
              <el-input v-model="expandForm.purposeReceiverName" placeholder="意向组接收人"
                        :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收时间" prop="field106">
              <el-date-picker v-model="expandForm.purposeReceiverTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请选择接受时间" clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分配组" prop="field109">

              <el-select v-model="expandForm.allotGo" placeholder="请选择分配组">
                <el-option
                  v-for="dict in groupIdOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分配时间" prop="field111">
              <el-date-picker v-model="expandForm.allotTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请选择分配时间" clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="转正时间" prop="field113">
              <el-date-picker v-model="expandForm.becomeTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请选择转正时间" clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加入黑名单？" prop="field114">
              <el-select v-model="expandForm.isBlack" placeholder="请选择">
                <el-option
                  v-for="dict in blackList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="field114">
              <el-input v-model="expandForm.remark" type="textarea" placeholder="请输入备注"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>

        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改义工信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body :close-on-click-modal="false">
      <el-row :gutter="5" type="flex">
        <el-form
          ref="form"
          :model="form"
          size="medium"
          label-width="100px"
        >
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输入姓名"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-select
                v-model="form.sex"
                placeholder="请选择性别"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in sexOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生年月" prop="birthday">
              <el-date-picker
                v-model="form.birthday"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择出生年月"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input
                v-model="form.age"
                placeholder="请选择出生年月"
                readonly
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="健康状况" prop="healthCondition">
              <el-select
                :style="{ width: '100%' }"
                v-model="form.healthCondition"
                placeholder="请选择健康状况"
              >
                <el-option
                  v-for="dict in healthConditionOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="居住地点" prop="addressId">
              <el-cascader
                v-model="form.addressId"
                :options="options"
                :style="{ width: '100%' }"
                placeholder="请选择居住地点"
                filterable
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="详细地址" prop="address">
              <el-input
                v-model="form.address"
                placeholder="请输入详细地址"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯" prop="nativePlace">
              <el-input
                v-model="form.nativePlace"
                placeholder="请输入籍贯"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职业" prop="occupation">
              <el-input
                v-model="form.occupation"
                placeholder="请输入职业"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idCard">
              <el-input
                v-model="form.idCard"
                placeholder="请输入身份证号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他" prop="otherNumber">
              <el-input
                v-model="form.otherNumber"
                placeholder="请输入其他（邮箱或微信）"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input
                v-model="form.phone"
                placeholder="请输入手机号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历" prop="education">
              <el-select
                v-model="form.education"
                placeholder="请选择学历"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(dict, index) in educationOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业证书" prop="professionalCertificate">
              <el-input
                v-model="form.professionalCertificate"
                placeholder="请输入专业证书"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="特长" prop="specialty">
              <el-input
                v-model="form.specialty"
                placeholder="请输入特长"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急联系人" prop="emergencyPerson">
              <el-input
                v-model="form.emergencyPerson"
                placeholder="请输入紧急联系人"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label-width="130px"
              label="紧急联系人电话"
              prop="emergencyPhone"
            >
              <el-input
                v-model="form.emergencyPhone"
                placeholder="请输入紧急联系人电话"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务日期" prop="serviceWeek">
              <el-select
                v-model="form.serviceWeek"
                placeholder="请选择服务日期 "
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in serviceWeekOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务时间" prop="serviceTime">
              <el-select
                v-model="form.serviceTime"
                placeholder="请选择服务时间"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in serviceTimeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请理由" prop="whyJoin">
              <el-input
                v-model="form.whyJoin"
                type="textarea"
                placeholder="为什么想要加入义工团队"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期许" prop="expectNote">
              <el-input
                v-model="form.expectNote"
                type="textarea"
                placeholder="您对南普陀义工服务社有哪些期许？期许"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col v-for="(item,index) in resumeList" :span="24" :key="index">
            <el-col :span="6">
              <el-form-item label="开始日期" prop="startDate">
                <el-input v-model="item.startDate" :style="{width: '110%'}" start-placeholder="开始日期"
                          end-placeholder="开始日期" clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结束日期" prop="endDate">
                <el-input v-model="item.endDate" :style="{width: '110%'}" start-placeholder="结束日期"
                          end-placeholder="结束日期" clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="地点" prop="place">
                <el-input v-model="item.place" placeholder="学校/单位" clearable :style="{width: '110%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="内容" prop="content">
                <el-input v-model="item.content" placeholder="学历/职务" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传相片" required>
              <el-upload
                ref="userPicId"
                :file-list="userPicIdfileList"
                :action="userPicIdAction"
                list-type="picture-card"
                accept="image/*"
                :multiple="false"
                :limit="1"
                :on-success="uploadUserPicId"
              >
                <i class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">
                  只能上传不超过 20MB 的文件大小，照片应彩色白底
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label-width="150px"
              label="身份证正面（国徽）"
              required
            >
              <el-upload
                ref="idCardFrontId"
                :file-list="idCardFrontIdfileList"
                :action="idCardFrontIdAction"
                list-type="picture-card"
                accept="image/*"
                :multiple="false"
                :limit="1"
                :on-success="uploadIdCardFront"

              >
                <i class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">
                  只能上传不超过 20MB 的image/*文件
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label-width="150px"
              label="身份证反面（人头）"
              required
            >
              <el-upload
                ref="idCardBackId"
                :file-list="idCardBackIdfileList"
                :action="idCardBackIdAction"
                list-type="picture-card"
                accept="image/*"
                :multiple="false"
                :limit="1"
                :on-success="uploadIdCardBack"
              >
                <i class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">
                  只能上传不超过 20MB 的image/*文件
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接待人1" prop="receiverO">
              <el-input
                v-model="form.receiverO"
                placeholder="请输入接待人1"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接待人2" prop="receiverT">
              <el-input
                v-model="form.receiverT"
                placeholder="请输入接待人2"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入备注"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="showDialog" title="导入excel">
      <el-form ref="elForm" size="medium" label-width="100px">
        <el-alert
          title="师兄好，导入前务必使用规定的模板进行导入，否则会出现导入失败的问题。
          点击导入按钮后，就已经在后台进行导出操作了，如果数据量大，请耐心等待。"
          type="info"
        >
        </el-alert>
        <el-form-item label="上传" prop="field101" required>
          <el-upload
            ref="upload"
            :auto-upload="false"
            :headers="imgUpload.headers"
            :file-list="field101fileList"
            :on-success="importSuccess"
            :action="importExcel"
            accept=".xls,.xlsx"
          >
            <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的.xls,.xlsx文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelImport">取消</el-button>
        <el-button type="primary" @click="submitUpload">确定导入</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listPerson,
  getPerson,
  delPerson,
  addPerson,
  updatePerson,
  exportPerson,
  addPersonExtend,
  getPersonInfo
} from '@/api/person/person'
import { regionData } from 'element-china-area-data'
import { getToken } from '@/utils/auth'

export default {
  name: 'Person',
  components: {},
  data() {
    return {
      //补充扩展
      openExpend: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 义工信息表格数据
      personList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      blackList: [
        { 'dictValue': 0, 'dictLabel': '否' },
        { 'dictValue': 1, 'dictLabel': '是' }
      ],
      // 性别字典
      sexOptions: [],
      // 健康状况字典
      healthConditionOptions: [],
      // 学历字典
      educationOptions: [],
      // 服务日期;1周一、2周二...字典
      serviceWeekOptions: [],
      // 服务时间;1上午、2下午字典
      serviceTimeOptions: [],
      // 查询参数
      options: regionData,
      resumeList: [{}, {}, {}],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        sex: null,
        birthday: null,
        nativePlace: null,
        healthCondition: null,
        occupation: null,
        age: null,
        otherNumber: null,
        provinceId: null,
        cityId: null,
        areaId: null,
        streetId: null,
        phone: null,
        address: null,
        idCard: null,
        education: null,
        professionalCertificate: null,
        specialty: null,
        emergencyPerson: null,
        emergencyPhone: null,
        serviceWeek: null,
        serviceTime: null,
        whyJoin: null,
        expectNote: null,
        receiverO: null,
        receiverT: null,
        isBlack: 0
      },
      // 表单参数
      form: {},
      // rules: {
      //   name: [
      //     {
      //       required: true,
      //       message: "请输入姓名",
      //       trigger: "blur",
      //     },
      //   ],
      //   sex: [
      //     {
      //       required: true,
      //       message: "请选择性别",
      //       trigger: "change",
      //     },
      //   ],
      //   birthday: [
      //     {
      //       required: true,
      //       message: "请选择出生年月",
      //       trigger: "change",
      //     },
      //   ],
      //   age: [
      //     {
      //       required: true,
      //       message: "请选择出生年月",
      //       trigger: "change",
      //     },
      //   ],
      //   healthCondition: [
      //     {
      //       required: true,
      //       message: "请选择健康状况",
      //       trigger: "change",
      //     },
      //   ],
      //   field135: [
      //     {
      //       required: true,
      //       type: "array",
      //       message: "请至少选择一个field135",
      //       trigger: "change",
      //     },
      //   ],
      //   address: [
      //     {
      //       required: true,
      //       message: "请输入详细地址",
      //       trigger: "blur",
      //     },
      //   ],
      //   nativePlace: [
      //     {
      //       required: true,
      //       message: "请输入籍贯",
      //       trigger: "blur",
      //     },
      //   ],
      //   occupation: [
      //     {
      //       required: true,
      //       message: "请输入职业",
      //       trigger: "blur",
      //     },
      //   ],
      //   idCard: [
      //     {
      //       required: true,
      //       message: "请输入身份证号",
      //       trigger: "blur",
      //     },
      //   ],
      //   otherNumber: [],
      //   phone: [
      //     {
      //       required: true,
      //       message: "请输入手机号",
      //       trigger: "blur",
      //     },
      //   ],
      //   education: [
      //     {
      //       required: true,
      //       message: "请选择学历",
      //       trigger: "change",
      //     },
      //   ],
      //   professionalCertificate: [],
      //   specialty: [
      //     {
      //       required: true,
      //       message: "请输入特长",
      //       trigger: "blur",
      //     },
      //   ],
      //   emergencyPerson: [
      //     {
      //       required: true,
      //       message: "请输入紧急联系人",
      //       trigger: "blur",
      //     },
      //   ],
      //   emergencyPhone: [
      //     {
      //       required: true,
      //       message: "请输入紧急联系人电话",
      //       trigger: "blur",
      //     },
      //   ],
      //   serviceWeek: [
      //     {
      //       required: true,
      //       message: "请选择服务日期",
      //       trigger: "change",
      //     },
      //   ],
      //   serviceTime: [
      //     {
      //       required: true,
      //       message: "请选择服务时间",
      //       trigger: "change",
      //     },
      //   ],
      //   whyJoin: [
      //     {
      //       required: true,
      //       message: "为什么想要加入义工团队",
      //       trigger: "blur",
      //     },
      //   ],
      //   expectNote: [
      //     {
      //       required: true,
      //       message: "您对南普陀义工服务社有哪些期许？期许",
      //       trigger: "blur",
      //     },
      //   ],
      //   receiverO: [
      //     {
      //       required: true,
      //       message: "请输入接待人1",
      //       trigger: "blur",
      //     },
      //   ],
      //   receiverT: [
      //     {
      //       required: true,
      //       message: "请输入接待人2",
      //       trigger: "blur",
      //     },
      //   ],
      //   remark: [],
      // },
      userPicIdAction: '/dev-api/common/upload',
      userPicIdfileList: [],
      idCardFrontIdAction: '/dev-api/common/upload',
      idCardFrontIdfileList: [],
      idCardBackIdAction: '/dev-api/common/upload',
      idCardBackIdfileList: [],
      importExcel: '/dev-api/person/person/import/excel',
      showDialog: false,
      field101fileList: [],

      imgUpload: {
        // 设置上传的请求头部
        headers: {
          Authorization: 'Bearer ' + getToken()
        }
      },
      formData: {},
      expandForm: {
        personId: null,
        wantGo: null,
        allotGo: null,
        purposeReceiverTime: null,
        purposeReceiverName: null,
        allotTime: null,
        becomeTime: null,
        enrollDate: null,
        probationStartDate: null,
        probationEndDate: null,
        isBlack: null
      },//补充资料
      groupIdOptions: [], //组别字典
      currentPersonId: null
    }
  },
  created() {
    this.getList()
    this.getDicts('sys_user_sex').then((response) => {
      this.sexOptions = response.data
    })
    this.getDicts('health_condition').then((response) => {
      this.healthConditionOptions = response.data
    })
    this.getDicts('education').then((response) => {
      this.educationOptions = response.data
    })
    this.getDicts('service_week').then((response) => {
      this.serviceWeekOptions = response.data
    })
    this.getDicts('service_time').then((response) => {
      this.serviceTimeOptions = response.data
    })
    this.getDicts('group').then(response => {
      this.groupIdOptions = response.data
    })
  },
  watch: {
    'form.birthday'(date) {
      this.form.age = this.getAge(date)
    },
    'form.addressId'(data) {
      console.log(data)
      //为区域设置ID
      if (data) {
        this.form.provinceId = data[0]
        this.form.cityId = data[1]
        this.form.areaId = data[2]
      }
    }
  },
  methods: {

    importSuccess(response) {
      if (response.code == 200) {
        this.$message.success(response.msg)
        this.showDialog = false
        this.field101fileList = []
        this.handleQuery()
      } else {
        this.$message.error(response.msg)
      }

    },
    cancelImport() {
      this.showDialog = false
      this.field101fileList = []
    },
    submitUpload() {
      this.$refs.upload.submit()
    },

    handleExtend(row) {
      console.log(row)
      this.currentPersonId = row.id

      this.getPersonInfo()
      this.openExpend = true

      this.clearExpandForm()

    },
    getPersonInfo() {
      getPersonInfo(this.currentPersonId).then(resp => {
        if (resp.data) {
          this.expandForm = resp.data
        }
      })
    },
    /** 查询义工信息列表 */
    getList() {
      this.loading = true
      listPerson(this.queryParams).then((response) => {
        this.personList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 性别字典翻译
    sexFormat(row, column) {
      return this.selectDictLabel(this.sexOptions, row.sex)
    },
    // 健康状况字典翻译
    healthConditionFormat(row, column) {
      return this.selectDictLabel(
        this.healthConditionOptions,
        row.healthCondition
      )
    },
    // 学历字典翻译
    educationFormat(row, column) {
      return this.selectDictLabel(this.educationOptions, row.education)
    },
    // 服务日期;1周一、2周二...字典翻译
    serviceWeekFormat(row, column) {
      return this.selectDictLabel(this.serviceWeekOptions, row.serviceWeek)
    },
    // 服务时间;1上午、2下午字典翻译
    serviceTimeFormat(row, column) {
      return this.selectDictLabel(this.serviceTimeOptions, row.serviceTime)
    },
    // 见习组别字典翻译
    groupIdFormat(row, column) {
      return this.selectDictLabel(this.groupIdOptions, row.groupId)
    },
    uploadUserPicId(response) {
      console.log(response)
      this.userPicIdfileList.push(response.fileName)
      this.form.userPicId = response.fileName
    },

    uploadIdCardFront(response) {
      console.log(response)
      this.idCardFrontIdfileList.push(response.fileName)
      this.form.idCardFrontId = response.fileName
    },
    uploadIdCardBack(response) {
      console.log(response)
      this.idCardBackIdfileList.push(response.fileName)
      this.form.idCardBackId = response.fileName

    },
    close() {
      this.expandForm = {
        personId: null,
        wantGo: null,
        allotGo: null,
        purposeReceiverName: null,
        purposeReceiverTime: null,
        allotTime: null,
        becomeTime: null,
        enrollDate: null,
        probationStartDate: null,
        probationEndDate: null,
        isBlack: null
      }
      this.openExpend = false
    },
    clearExpandForm() {
      this.expandForm = {
        personId: null,
        wantGo: null,
        allotGo: null,
        purposeReceiverName: null,
        purposeReceiverTime: null,
        allotTime: null,
        becomeTime: null,
        enrollDate: null,
        probationStartDate: null,
        probationEndDate: null,
        isBlack: null
      }
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        addressId: [],
        id: null,
        name: null,
        sex: null,
        birthday: null,
        nativePlace: null,
        healthCondition: null,
        occupation: null,
        age: null,
        otherNumber: null,
        provinceId: null,
        cityId: null,
        areaId: null,
        streetId: null,
        phone: null,
        address: null,
        idCard: null,
        createBy: null,
        createTime: null,
        updateTime: null,
        updateBy: null,
        education: null,
        professionalCertificate: null,
        specialty: null,
        emergencyPerson: null,
        emergencyPhone: null,
        serviceWeek: null,
        serviceTime: null,
        whyJoin: null,
        expectNote: null,
        receiverO: null,
        receiverT: null,
        remark: null
      }
      this.resetForm('form');
      this.clearPicList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加义工信息'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getPerson(id).then((response) => {
        this.getInfoDetail(response.data)
        this.form = response.data
        this.open = true
        this.title = '修改义工信息'
      })
    },

    handleImport() {
      this.showDialog = true
    },

    /**
     * 回显数据
     * @param response
     */
    getInfoDetail(data) {

      //回显区域设置]
      this.form.addressId = []
      this.form.addressId[0] = data.provinceId
      this.form.addressId[1] = data.cityId
      this.form.addressId[2] = data.areaId
      console.log(this.form.addressId)
      //回显照片数据
      if (data.userPicId) {
        let temp = {}
        temp.name = '用户照片'
        temp.url = this.apiAddress + data.userPicId
        this.userPicIdfileList.push(temp)
      }
      if (data.idCardBackId) {
        let temp2 = {}
        temp2.name = '身份证'
        temp2.url = this.apiAddress + data.idCardBackId
        this.idCardBackIdfileList.push(temp2)
      }
      if (data.idCardFrontId) {
        let temp3 = {}
        temp3.name = '身份证'
        temp3.url = this.apiAddress + data.idCardFrontId
        this.idCardFrontIdfileList.push(temp3)
      }
      this.resumeList = data.resumeList
      let resumeTempList = []
      data.resumeList.forEach(i => {
        console.log(i)
        let temp = {}
        temp.startDate = i.startDate
        temp.endDate = i.endDate
        temp.place = i.place
        temp.content = i.content
        resumeTempList.push(temp)
      })
      this.resumeList = resumeTempList
    },

    clearPicList(){
      this.userPicIdfileList = [];
      this.idCardBackIdfileList = [];
      this.idCardFrontIdfileList = [];
    },
    /** 提交按钮 */
    submitForm() {
      let _this = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let resumeList = []
          if (_this.resumeList) {
            _this.resumeList.forEach(
              item => {
                try {
                  let temp = {}
                  let place = item.place
                  let content = item.content

                  temp.startDate = item.startDate
                  temp.endDate = item.endDate

                  temp.place = place
                  temp.content = content
                  resumeList.push(temp)
                } catch (e) {
                }
              }
            )
            this.form.resumeList = resumeList
          }

          if (this.form.id != null) {
            updatePerson(this.form).then((response) => {
              this.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addPerson(this.form).then((response) => {
              this.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$confirm(
        '是否确认删除义工数据项?',
        '谨慎操作',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(function() {
          return delPerson(ids)
        })
        .then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        })
        .catch(() => {
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有义工信息数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.exportLoading = true
          return exportPerson(queryParams)
        })
        .then((response) => {
          this.download(response.msg)
          this.exportLoading = false
        })
        .catch(() => {
        })
    },
    /**
     * 确认添加补充资料
     */
    handleConfirm() {
      this.expandForm.personId = this.currentPersonId
      addPersonExtend(this.expandForm).then((response) => {
        if (response.code == 200) {
          this.$message.success('修改成功')
          this.close()
        }
      })
    }
  }
}
</script>
<style scoped="scoped">
>>> .el-dialog {
  width: 55%;
}
</style>
